<script lang="ts" setup>
// @ts-ignore
import {ArticlePath} from "~/config/SystemConfig";
// @ts-ignore
let props = defineProps({
    info: '' as any
});

function share() {
    const shareButton: any = document.querySelector('#copy-btn');
    if (!navigator.share) {
        shareButton.remove();
    }
    if (navigator.share) {
        navigator.share({
            title: "分享「" + props.info.author.nickname + "」发表的文章「" + props.info.articleTitle + "」",
            url: window.location.href,
            text: "",
        })
            .then(() => console.log('分享成功'))
            .catch((error) => console.log('分享失败:', error));
    }
}
</script>
<template>
    <aside class="aside-area">
        <div class="aside-author fade-before fade-after">
            <div class="author-avatar">
                <template v-if="props.info.author">
                    <img alt=""
                         :src="props.info.author.avatar"
                         class="avatar avatar-500 photo loaded"
                         height="500"
                         width="500"
                         loading="lazy"
                         decoding="async">
                </template>
                <template v-else>
                    <img alt=""
                         src="https://cravatar.cn/avatar/8546cf1694037de5905abc62aeadf5e9?s=500&amp;d=mm&amp;r=g"
                         class="avatar avatar-500 photo loaded"
                         height="500"
                         width="500"
                         loading="lazy"
                         decoding="async">
                </template>
            </div>
            <header class="author-info">
                <div class="name">
                    <template v-if="props.info.author">
                        <em>我是{{ props.info.author.nickname }}</em>
                    </template>
                    <template v-else>
                        <em>我是Auth</em>
                    </template>
                    寒烟志的作者
                </div>
                <div class="tool">
                    <a class="icon-qq"
                       href="tencent://AddContact/?fromId=45&amp;fromSubId=1&amp;subcmd=all&amp;uin=3303295829"
                       target="_blank" role="button"></a>
                    <a id="copy-btn" class="share icon-share" role="button" @click="share"></a>
                </div>
            </header>
            <div class="text des">
                我是一名来自叙州府的青年！希望我的文章能给您带来正能量和思考，如果能在您的生活中体现些许色彩那就更好了。
            </div>
            <div class="text note">
                <div class="arc-copy">请您在需要时注明本文内容来源信息，若涉及转载第三方内容，请您一同注明。</div>
            </div>
            <div class="navigation aside-navigation">
                <template v-if="props.info.preArticleCard">
                    <a :href="ArticlePath.Path + props.info.preArticleCard.id" rel="prev">
                        <span>上一篇 / {{ props.info.preArticleCard.articleTitle }}</span>
                    </a>
                </template>
                <template v-if="props.info.nextArticleCard">
                    <a :href="ArticlePath.Path + props.info.nextArticleCard.id" rel="next">
                        <span>下一篇 / {{ props.info.nextArticleCard.articleTitle }}</span>
                    </a>
                </template>
            </div>
        </div>
        <slot name="aside-comment"/>
    </aside>
</template>
<style scoped>

</style>
